<template>
  <div>


    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
             :collapse="isCollapse">
      <el-menu-item index="0-1" @click="$emit('menu','AdminIndex')" v-if="$root.sessionName"><i class="el-icon-user"></i>{{
          $root.sessionName + '管理员'
        }}
      </el-menu-item>
      <el-menu-item index="0-1" @click="$router.push('/#')" v-if="!$root.sessionName"><i class="el-icon-error"></i>未登录
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">信息管理</span>
        </template>
        <el-menu-item-group>
          <span slot="title"></span>
          <el-menu-item index="1-1" @click="$emit('menu','VideoDashboard')"><i class="el-icon-s-data"></i>视频数据
          </el-menu-item>
          <el-menu-item index="1-2" @click="$emit('menu','TopicDashboard.vue')"><i class="el-icon-s-data"></i>文章数据
          </el-menu-item>
<!--          <el-menu-item index="1-3"><i class="el-icon-s-custom" v-if="false"></i>个人信息维护</el-menu-item>-->
          <el-menu-item index="1-4" @click="logout"><i class="el-icon-s-fold"></i>退出登录</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-menu-item-group>
        <el-menu-item index="2-1" @click="$emit('menu','VideoTab')"><i class="el-icon-video-camera-solid"></i>视频数据管理
        </el-menu-item>
        <el-menu-item index="2-2" @click="$emit('menu','TopicTab')"><i class="el-icon-s-order"></i>文章数据管理
        </el-menu-item>
        <el-menu-item index="2-3" @click="$emit('menu','CommentTab')"><i class="el-icon-s-comment"></i>评论数据管理
        </el-menu-item>
        <el-menu-item index="2-4" @click="$emit('menu','UserTab')"><i class="el-icon-s-custom"></i>用户数据管理
        </el-menu-item>
      </el-menu-item-group>


    </el-menu>
  </div>
</template>

<script>
export default {
  name: "AdminLeftNavbar",
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },


    logout() {
      this.$confirm('将退出Heal后台管理系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '登出成功，再见' + this.$root.sessionName + '！'
        });
        this.$root.sessionId = null;
        this.$root.sessionName = null;
        setTimeout(() => this.$router.push('/#'), 1000);

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消登出'
        });
      });

    }
  }
}
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>